<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>UFO Backup - Community</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@unocss/reset@66.5.2/tailwind.min.css"
    />
    <script src="https://cdn.jsdelivr.net/npm/@unocss/runtime@66.5.2/uno.global.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
      rel="stylesheet"
    />
    <style>
      body {
        font-family: "Inter", sans-serif;
      }
      /* Float animation for the logo */
      .float-animation {
        animation: float 6s ease-in-out infinite;
      }
      @keyframes float {
        0% {
          transform: translateY(0px);
        }
        50% {
          transform: translateY(-15px);
        }
        100% {
          transform: translateY(0px);
        }
      }
      /* UnoCSS FOUC prevention */
      [un-cloak] {
        display: none;
      }
    </style>
  </head>
  <body
    class="bg-gray-900 text-white min-h-screen flex items-center justify-center p-4"
  >
    <div class="w-full max-w-2xl mx-auto text-center" un-cloak>
      <img
        src="https://raw.githubusercontent.com/eduardolat/pgbackweb/refs/tags/v0.5.0/internal/view/static/images/logo.png"
        alt="UFO Backup Logo"
        class="w-32 h-32 md:w-40 md:h-40 mx-auto mb-6 float-animation"
      />

      <h1 class="text-4xl md:text-5xl font-bold text-cyan-400 mb-2">
        UFO Backup
      </h1>
      <p class="text-md italic text-gray-500 mb-4">Formerly PG Back Web</p>
      <p class="text-lg md:text-xl text-gray-300 mb-6">
        Effortless backups with a user-friendly web interface!
      </p>

      <div
        class="inline-block bg-cyan-900/50 border border-cyan-700 rounded-full px-4 py-1 text-sm text-cyan-300 font-medium mb-8"
      >
        Currently supporting: PostgreSQL
      </div>

      <p class="text-lg text-gray-400 mb-10">
        Connect, share, and collaborate with us below.
      </p>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <a
          href="https://ufobackup.uforg.dev/r/discord"
          target="_blank"
          rel="noopener noreferrer"
          class="bg-gray-800 border border-gray-700 rounded-lg p-6 flex flex-col items-center justify-center transition-all duration-300 transform hover:-translate-y-2 hover:shadow-xl hover:shadow-indigo-500/40"
        >
          <div class="w-12 h-12 mb-4 flex items-center justify-center">
            <img
              src="https://cdn.worldvectorlogo.com/logos/discord.svg"
              alt="Discord Logo"
              class="h-10"
            />
          </div>
          <h3 class="text-xl font-bold text-white mb-1">
            Chat on <br />
            Discord
          </h3>
          <p class="text-sm text-gray-400">Join the real-time conversation.</p>
        </a>

        <a
          href="https://ufobackup.uforg.dev/r/reddit"
          target="_blank"
          rel="noopener noreferrer"
          class="bg-gray-800 border border-gray-700 rounded-lg p-6 flex flex-col items-center justify-center transition-all duration-300 transform hover:-translate-y-2 hover:shadow-xl hover:shadow-orange-500/40"
        >
          <div class="w-12 h-12 mb-4 flex items-center justify-center">
            <img
              src="https://cdn.worldvectorlogo.com/logos/reddit-4.svg"
              alt="Reddit Logo"
              class="h-12"
            />
          </div>
          <h3 class="text-xl font-bold text-white mb-1">Discuss on Reddit</h3>
          <p class="text-sm text-gray-400">Share ideas and stay up-to-date.</p>
        </a>

        <a
          href="https://ufobackup.uforg.dev/r/github"
          target="_blank"
          rel="noopener noreferrer"
          class="bg-gray-800 border border-gray-700 rounded-lg p-6 flex flex-col items-center justify-center transition-all duration-300 transform hover:-translate-y-2 hover:shadow-xl hover:shadow-gray-400/40"
        >
          <div class="w-12 h-12 mb-4 flex items-center justify-center">
            <img
              src="https://cdn.worldvectorlogo.com/logos/github-icon-2.svg"
              alt="GitHub Logo"
              class="h-12"
            />
          </div>
          <h3 class="text-xl font-bold text-white mb-1">
            Contribute on GitHub
          </h3>
          <p class="text-sm text-gray-400">
            Review the code and make contributions.
          </p>
        </a>
      </div>
    </div>
  </body>
</html>
